<script setup>
import { defineAsyncComponent } from 'vue'
import lodash from 'lodash'

const MsgImage = defineAsyncComponent(() => import('./msg-image.vue')) // 图片消息
const MsgVideo = defineAsyncComponent(() => import('./msg-video.vue')) // 视频消息
const MsgAudio = defineAsyncComponent(() => import('./msg-audio.vue')) // 音频消息
const MsgUrl = defineAsyncComponent(() => import('./msg-url.vue')) // 链接消息
const MsgAttachment = defineAsyncComponent(() => import('./msg-attachment.vue')) // 附件消息
const MsgEmoticon = defineAsyncComponent(() => import('./msg-emoticon.vue')) // 表情消息
const MagMiniProgram = defineAsyncComponent(() => import('./msg-mini-program.vue')) // 小程序消息
const MsgContact = defineAsyncComponent(() => import('./msg-contact.vue')) // 名片消息

// 获取当前时间
const timeTemplate = lodash.template(
  '<%= d.getFullYear() %>-<%= (d.getMonth() + 1).toString().padStart(2, "0") %>-<%= d.getDate().toString().padStart(2, "0") %> <%= d.getHours().toString().padStart(2, "0") %>:<%= d.getMinutes().toString().padStart(2, "0") %>:<%= d.getSeconds().toString().padStart(2, "0") %>'
)

const _props = defineProps({
  messageList: {
    type: Array,
    default: () => []
  }
})

// 对话类型
function dialogType({ isOfficial, isRoom }) {
  if (isOfficial) return '公众号'
  return isRoom ? '群聊' : '私聊'
}
</script>

<template>
  <div class="my-3">
    <el-card
      v-for="({ data, data: { userInfo }, data: { message: msg } }, index) in messageList"
      :key="index"
      :class="{ 'is-me': data.isSelf, [data.isSelf ? 'ml-20' : 'mr-20']: true }"
      shadow="never"
      class="mx-3"
    >
      <template #header>
        <div class="flex items-center is-me-header">
          <el-avatar :size="38" :src="userInfo.avatar" />
          <div class="mx-2">
            <div class="text-sm mb-1 flex items-center gap-1 is-me-header-name">
              <el-text class="max-w-24 truncate">{{ userInfo.alias || userInfo.name }}</el-text>
              <el-tag type="primary" class="text-xs">{{ dialogType(data) }}</el-tag>
              <el-tag v-if="data.isRoom" type="info">
                <el-text class="max-w-24 inline-block truncate text-xs">{{
                  data.roomName
                }}</el-text>
              </el-tag>
            </div>
            <div class="text-xs text-gray-400">
              {{ timeTemplate({ d: new Date(msg.timestamp * 1000) }) }}
            </div>
          </div>
        </div>
      </template>
      <div class="msg-content w-auto flex is-me-content rounded overflow-hidden">
        <template v-if="msg.msgType === 'Image'">
          <MsgImage :file="msg?.detail" />
        </template>
        <template v-else-if="msg.msgType === 'Emoticon'">
          <MsgEmoticon :src="msg?.detail?.remoteUrl" />
        </template>
        <template v-else-if="msg.msgType === 'Audio'">
          <MsgAudio :file="msg?.detail" />
        </template>
        <template v-else-if="msg.msgType === 'Video'">
          <MsgVideo :file="msg?.detail" />
        </template>
        <template v-else-if="msg.msgType === 'Url'">
          <MsgUrl :url="msg?.detail?.payload" />
        </template>
        <template v-else-if="msg.msgType === 'Contact'">
          <MsgContact :content="msg?.detail" />
        </template>
        <template v-else-if="msg.msgType === 'MiniProgram'">
          <MagMiniProgram :url="msg?.detail?.payload" />
        </template>
        <template v-else-if="msg.msgType === 'Attachment'">
          <MsgAttachment :file="msg?.detail" />
        </template>
        <template v-else-if="msg.msgType === 'Transfer'">
          <el-text
            class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap px-4 py-2"
            size="default"
            type="warning"
            >{{ msg?.detail }}</el-text
          >
        </template>
        <template v-else>
          <el-text
            class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap px-4 py-2"
            size="default"
            >{{ msg?.text }}</el-text
          >
        </template>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  background: transparent;
  border: none;
  margin-top: 0;
  margin-bottom: 0;
  .el-card__header {
    padding: 10px 10px;
    padding-bottom: 0;
    border-bottom-color: transparent;
  }
  .el-card__body {
    display: flex;
    padding: 10px;
  }
}

.msg-content {
  background-color: var(--el-color-info-light-9);
  user-select: text;
}

.is-me {
  flex-direction: row-reverse;
  .is-me-header {
    flex-direction: row-reverse;
  }
  :deep(.el-card__body) {
    flex-direction: row-reverse;
  }
  .msg-content {
    background-color: var(--el-color-success-light-7);
  }
}
</style>
